<template>
  <div>
    <el-input
      v-model="columnName"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="width:100%;margin-bottom: 20px"
      placeholder="输入关键字进行过滤"
    >
    </el-input>
    <el-tree
    :allow-drop="nodeDrop"
     @node-drag-end="nodeDragEnd"
      node-key="id"
      ref="tree"
      empty-text=""
      :data="treeData"
      :load="loadNode"
      lazy
      @node-click="getDefineNode"
      :show-checkbox="showcheckbox"
      @check-change="handleCheckChange"
      :filter-node-method="filterNode"
      draggable
      @node-drag-start="handleDragStart"
      :expand-on-click-node="false"
      :props="props"
    >
    </el-tree>
  </div>
</template>

<script>
import { listZone } from '@/api/quota/theme_zone/zone.js'
import { getSetList } from '@/api/quota/theme_zone/set.js'
import { getDefineByTheme } from '@/api/quota/define/define.js'
// import  draggable from 'vuedraggable';
export default {
  props: {
    showcheckbox: {
      type: Boolean,
      default: true
    }

  },
  data() {
    return {
      props: {
        label: 'name',
        isLeaf: 'leaf'
      },
      //选中指标ID
      ids: [],
      //选中指标
      quotas: [],
      //选中节点
      name: '',
      columnName: undefined,
      treeData: undefined,
      checkedNodes: [],
      node_had: [], // 触发 tree 的 :load=loadNode 重复触发  动态更新tree
      resolve_had: [],
      setParams: {
        parentId: null,
        zoneId: null
      },
      quotaParams: {
        pageSize: 1000000,
        themeSetId: null,
        orderField: 'UPDATE_DATE',
        order: 'desc'
      }
    }
  },
  watch: {
    columnName(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    //阻止节点默认拖拽
    nodeDrop(){
      return false
    },
    //拖拽指标节点
    nodeDragEnd(node){
      if(node.data.isQuota){
       this.$emit("handleDragNode",node.data)
      }


    },
    //拖拽开始
    handleDragStart(draggingNode, dropNode, dropType, ev) {
        // console.log('tree drag end: ', dropNode && dropNode.label, dropType)

        this.$emit('dragNode', draggingNode.data);
      },
    //获取指标节点
    getDefineNode(val) {
      this.$emit('clickObj', val)
      if (val.isQuota) {
        this.$emit('computedQuota', val)
      }
    },
    //清空树
    resetTree() {
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
      })
    },
    //过滤node
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    //按层级进行懒加载
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_had = node //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve //同上，把node.level == 0的resolve也存起来
        listZone({ pageNum: 1, pageSize: 1000 }).then((response) => {
          if (response.code === 0) {
            let arr = []
            let ds = response.data.list
            ds.forEach((item) => {
              this.setParams.zoneId = item.id
              arr.push({ name: item.zoneTitle + '(主题域)', id: item.id })
            })
            return resolve(arr)
          }
        })
      }
      if (node.level === 1) {
        this.setParams.zoneId = node.data.id
        this.setParams.parentId = null
        getSetList(this.setParams).then((response) => {
          if (response.code === 0) {
            let arr = []
            let ds = response.data
            ds.forEach((item) => {
              arr.push({
                name: `${item.setTitle}(${item.category})`,
                id: item.id,
                zoneId: item.zoneId,
                category: item.category
              })
            })
            resolve(arr)
          }
        })
      }
      if (node.level >= 2) {
        this.quotaParams.themeSetId = node.data.id
        if (node.data.category === '主题') {
          getDefineByTheme(this.quotaParams).then((response) => {
            let arr = []
            let ds = response.data.list
            ds.forEach((item) => {
              arr.push({ name: item.name + '(指标)', isQuota: true, id: item.id, leaf: true })
            })
            return resolve(arr)
          })
        } else if (node.data.category === '主题集') {
          this.setParams.parentId = node.data.id
          this.setParams.zoneId = node.data.zoneId
          getSetList(this.setParams).then((response) => {
            if (response.code === 0) {
              let arr = []
              let ds = response.data
              ds.forEach((item) => {
                arr.push({
                  name: `${item.setTitle}(${item.category})`,
                  id: item.id,
                  zoneId: item.zoneId,
                  category: item.category
                })
              })
              resolve(arr)
            }
          })
        }
      }
    },
    //选中指标加载默认维度
    handleCheckChange(data, checked, indeterminate) {
      if (data.isQuota) {
        if (checked) {
          this.ids.push(data.id)
          this.$emit('sendIds', this.ids)
          this.quotas.push({ id: data.id, name: data.name })
          this.$emit('sendQuotas', this.quotas)

        } else {
          let index = this.ids.indexOf(data.id)
          this.ids.splice(index, 1)
          this.$emit('sendIds', this.ids)
          let idx = this.quotas.findIndex(item => {
            return item.id === data.id
          })
          this.quotas.splice(idx, 1)
          this.$emit('sendQuotas', this.quotas)
        }

      }
    }
  }

}
</script>

<style scoped>
</style>

